<template>
  <div class="stroke-order-container">
    <StrokeGrid 
      :strokeData="strokeData" 
      :highlightIndex="highlightIndex"
      :characterText="characterText"
    />
  </div>
</template>

<script>
import StrokeGrid from './stroke/StrokeGrid.vue'

export default {
  name: 'StrokeOrderDisplay',
  components: {
    StrokeGrid
  },
  props: {
    strokeData: {
      type: Array,
      default: () => []
    },
    characterText: {
      type: String,
      default: ''
    },
    highlightIndex: {
      type: Number,
      default: -1 // -1表示不高亮任何笔画
    }
  },
  created() {
    console.log('StrokeOrderDisplay 创建 - 字符:', this.characterText);
    console.log('StrokeOrderDisplay 创建 - 笔画数据:', JSON.stringify(this.strokeData?.length));
    console.log('StrokeOrderDisplay 创建 - 高亮索引:', this.highlightIndex);
  },
  mounted() {
    console.log('StrokeOrderDisplay 挂载 - 字符:', this.characterText);
  },
  watch: {
    strokeData: {
      handler(newVal) {
        console.log('StrokeOrderDisplay 笔画数据变化:', JSON.stringify(newVal?.length));
      },
      deep: true
    },
    characterText(newVal) {
      console.log('StrokeOrderDisplay 字符变化:', newVal);
    },
    highlightIndex(newVal) {
      console.log('StrokeOrderDisplay 高亮索引变化:', newVal);
    }
  }
}
</script>

<style scoped>
.stroke-order-container {
  width: 100%;
  padding: 5px 0;
}
</style> 